<template>
	<view class="body">
		<view
			style="display:flex;height: 100rpx;background-color: rgb(45, 135, 222);width: 100%;display: flex;justify-content: center;align-items: center;color: white;font-size: 40rpx;">
			健康检测报告</view>
		<view class="container">
			<view v-for="item in data">
				<view class="card">
					<view
						style="flex:1;padding:20rpx;font-size: 35rpx;color: rgb(40, 82, 222);border-bottom: 1px solid rgb(110, 173, 255);">
						基本信息</view>
					<view style="display: flex;">
						<view style="flex:1;padding:20rpx;display:flex;align-items: center;white-space: nowrap;">
							姓名：{{item.userRecordName}}</view>
					</view>
					<view style="display: flex;">

						<view style="flex:1;padding:20rpx;display:flex;align-items: center;white-space: nowrap;">
							性别：{{item.userRecordSex===1?"男":"女"}}</view>
						<view style="flex:1;padding:20rpx;display:flex;align-items: center;white-space: nowrap;">
							年龄：{{item.userRecordAge}}岁</view>
					</view>
					<view style="display: flex;">
						<view style="flex:1;padding:20rpx;display:flex;align-items: center;white-space: nowrap;">
							身高：{{item.userRecordHeight}}cm</view>
						<view style="flex:1;padding:20rpx;display:flex;align-items: center;white-space: nowrap;">
							体重：{{item.userRecordWeight}}kg</view>
					</view>
				</view>
				<view style="height:30rpx"></view>
				<view class="card2">
					<view
						style="flex:1;padding:20rpx;font-size: 35rpx;color: rgb(40, 82, 222);border-bottom: 1px solid rgb(110, 173, 255);">
						基本信息</view>
					<view style="display: flex;flex-direction: column;">
						<view
							style="flex:1;padding:20rpx;font-size: 30rpx;border-bottom: 1px solid rgb(110, 173, 255);">
							舒张压：{{item.userRecordDiastolicBloodPressure?item.userRecordDiastolicBloodPressure+'mmhg':"未提供"}}
						</view>
						<view
							style="flex:1;padding:20rpx;font-size: 30rpx;border-bottom: 1px solid rgb(110, 173, 255);">
							收缩压：{{item.userRecordSystolicBloodPressure?item.userRecordSystolicBloodPressure+'mmhg':"未提供"}}
						</view>
						<view
							style="flex:1;padding:20rpx;font-size: 30rpx;border-bottom: 1px solid rgb(110, 173, 255);">
							BMI：{{item.bmi}}kg/m²</view>
						<view
							style="flex:1;padding:20rpx;font-size: 30rpx;border-bottom: 1px solid rgb(110, 173, 255);">
							基础代谢率(BMR)：{{item.bmr}}kcal/天</view>
						<view
							style="flex:1;padding:20rpx;font-size: 30rpx;border-bottom: 1px solid rgb(110, 173, 255);">
							体脂率：{{item.bodyFat}}%</view>
						<view style="flex:1;padding:20rpx;font-size: 30rpx;">血压分类：{{item.bloodPressureClass}}</view>
					</view>
				</view>
				<view style="height:30rpx"></view>
				<!--         const stamp= new Date().getTime() + 8 * 60 * 60 * 1000;
         // 格式化北京时间为"YYYY-MM-DD HH:mm:ss"
         const beijingTime = new Date(stamp).toISOString().replace(/T/, ' ').replace(/\..+/, '').substring(0, 19); -->
				<!-- <veiw>{{item.create_time}}</veiw> -->
				<veiw>{{item.createdAt.replace(/\+.*$/, '').replace('T', ' ').replace(/\.\d+$/, '')}}</veiw>
				<view style="height:30rpx"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		getcreateHealthRecordHistory,
		createHealthRecord
	} from '@/request/health.js'
	import {
		onMounted,
		ref
	} from 'vue';

	const phone = ref("")
	const data = ref([])
	const user_accounts_id = ref("")
	const historyid = ref("")
	onLoad((options) => {

		console.log(options.orderId)
		getcreateHealthRecordHistory(options.orderId).then(res => {
			console.log(res.data.list)
			const lastItem = res.data.list.filter(item => item.id === Number(options.id));
			console.log(lastItem)
			// const newArray = [lastItem];
			data.value = lastItem
			console.log(data.value)
		}).catch(err => {

		})
	})
	onMounted(() => {
		// phone.value = uni.getStorageSync("realphone")
		// user_accounts_id.value = uni.getStorageSync("useracountid")
		// const historyid = uni.getStorageSync("keyid")

		// healthhistory(phone.value,user_accounts_id.value).then(res => {
		//   console.log(historyid,res.result.data)
		//   const lastItem = res.result.data.filter(item => item.id === historyid);
		//   console.log(lastItem)
		//   // const newArray = [lastItem];
		//   data.value = lastItem
		//   console.log(data.value)
		// }).catch(err => {

		// })
	})

	const convertTime = (dateTimeString) => {
		const date = new Date(dateTimeString);
		const year = date.getFullYear();
		const month = date.getMonth() + 1;
		const day = date.getDate();
		const hours = date.getHours();
		const minutes = date.getMinutes();
		const seconds = date.getSeconds();

		return `${year}年${month}月${day}日，${hours}:${minutes}:${seconds}`;
	};
</script>

<style>
	.card {
		background-color: white;
		width: 100%;
		min-height: 20vh;
		border-radius: 30rpx;
	}

	.card2 {
		background-color: white;
		width: 100%;
		min-height: 20vh;
		border-radius: 30rpx;
	}

	.card2 view {}

	.body {
		font-family: Arial, sans-serif;
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background-color: #f4f4f4;
		flex-direction: column;
	}

	.report {
		margin-top: 20px;
		border-bottom: 1rpx solid black;
	}

	.report h3 {
		text-align: center;
	}

	.container {
		background-color: rgb(218, 232, 242);
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		width: 100%;
		height: 100vh;
		/* max-width: 400px; */
		box-sizing: border-box;
	}

	.container h2 {
		text-align: center;
		margin-bottom: 20px;
	}

	.container label {
		display: block;
		margin-bottom: 5px;
	}

	.container input {
		width: 100%;
		padding: 8px;
		margin-bottom: 10px;
		border: 1px solid #ddd;
		border-radius: 4px;
		box-sizing: border-box;
		height: 80rpx;
		display: flex;

		align-items: center;
	}

	.container button {
		width: 100%;
		padding: 10px;
		background-color: #2846FF;
		color: #fff;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.container button:hover {
		background-color: #2846FF;
	}
</style>
